<template>
  <view class="container">
    <view class="config_card">
      <view class="title">条件 </view>

      <view class="confong_radio"
        ><u-radio-group v-model="conconfig" placement="row">
          <u-radio name="or" label="当满足任一条件时"></u-radio>
          <u-radio name="and" label="当满足所有条件时"></u-radio>
        </u-radio-group>
      </view>

      <view
        @click="show = true"
        class="config_footer"
        v-if="addedConditions.length === 0"
      >
        <img src="@/static/automation/Union.png" class="union_png" alt="" />
      </view>

      <view v-else class="common_cell added_conditions">
        <u-cell-group :border="false">
          <u-cell
            v-for="(item, index) in addedConditions"
            :key="index"
            :border="false"
            :title="item.title"
            :label="item.label"
          >
            <view slot="icon">
              <img
                v-if="item.isStatus"
                class="addedConditions_icon_img"
                src="@/static/automation/wenkong.png"
              />

              <img
                v-else-if="item.isTime"
                class="addedConditions_icon_img"
                src="@/static/automation/dingshi.png"
              />

              <img
                v-else
                class="addedConditions_icon_img"
                src="@/static/automation/qixiang.png"
              />
            </view>
          </u-cell>
        </u-cell-group>
      </view>

      <img
        class="add_config"
        src="@/static/automation/plus-circle.png"
        alt=""
        @click="show = true"
      />

      <view class="add_config_text" v-if="addedConditions.length === 0">
        添加条件</view
      >
    </view>

    <view class="config_card card_mt">
      <view class="title">任务 </view>

      <view class="confong_radio" v-if="addedTasks.length === 0">
        <view style="height: 13px"> </view>
      </view>

      <view
        v-if="addedTasks.length === 0"
        class="config_footer"
        @click="show2 = true"
      >
        <img src="@/static/automation/Union.png" class="union_png" alt="" />
      </view>

      <view v-else class="common_cell added_conditions">
        <u-cell-group :border="false">
          <u-cell
            v-for="(item, index) in addedTasks"
            :key="index"
            :border="false"
            :title="item.title"
            :label="item.label"
          >
            <view slot="icon">
              <img
                v-if="item.isStatus"
                class="addedConditions_icon_img"
                src="@/static/automation/wenkong.png"
              />

              <img
                v-else-if="item.isTime"
                class="addedConditions_icon_img"
                src="@/static/automation/dingshi.png"
              />

              <img
                v-else
                class="addedConditions_icon_img"
                src="@/static/automation/qixiang.png"
              />
            </view>
          </u-cell>
        </u-cell-group>
      </view>

      <img
        class="add_config"
        src="@/static/automation/plus-circle.png"
        alt=""
        @click="show2 = true"
      />

      <view
        class="add_config_text"
        @click="show2 = true"
        v-if="addedTasks.length === 0"
      >
        添加任务</view
      >
    </view>

    <view class="common_cell">
      <u-cell title="名称">
        <u-input
          slot="value"
          v-model="planName"
          border="none"
          placeholder="请输入名称"
          inputAlign="right"
        />
      </u-cell>
    </view>

    <view class="common_cell" @click="toEffectTime">
      <u-cell title="生效时间段" isLink> </u-cell>
    </view>

    <view class="common_save_button">保存 </view>

    <!-- 添加条件 -->
    <u-popup :show="show" @close="close" @open="open">
      <view class="popup_content">
        <text class="popup_title">添加条件</text>

        <u-cell isLink :border="false" @click="toMetrorologicalChange">
          <img
            slot="icon"
            class="popup_icon_img"
            src="@/static/automation/qixiang.png"
          />

          <text slot="title" class="popup_title_text">气象变化时</text>
        </u-cell>

        <u-cell isLink :border="false" @click="toStateChange">
          <img
            slot="icon"
            class="popup_icon_img"
            src="@/static/automation/wenkong.png"
          />

          <text slot="title" class="popup_title_text">设备状态变化时</text>
        </u-cell>

        <u-cell @click="toRegularTimeChange" isLink :border="false">
          <img
            slot="icon"
            class="popup_icon_img"
            src="@/static/automation/dingshi.png"
          />

          <text slot="title" class="popup_title_text">定时</text>
        </u-cell>
      </view>
    </u-popup>

    <!-- 添加任务 -->
    <u-popup :show="show2" @close="close2">
      <view class="popup_content">
        <text class="popup_title">添加任务</text>

        <u-cell isLink :border="false" @click="toOperation">
          <img
            slot="icon"
            class="popup_icon_img"
            src="@/static/automation/qixiang.png"
          />

          <text slot="title" class="popup_title_text">操作设备</text>
        </u-cell>

        <u-cell isLink :border="false" @click="toDelay">
          <img
            slot="icon"
            class="popup_icon_img"
            src="@/static/automation/wenkong.png"
          />

          <text slot="title" class="popup_title_text">延时</text>
        </u-cell>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  airQualityMap,
  conditionMap,
  humidityMap,
  pm25Map,
  sunriseMap,
  weatherMap,
} from "@/common/enum/automationConfig/index.js";
export default {
  data() {
    return {
      // 页面参数
      options: {},
      planName: "",
      conconfig: "or",
      title: "添加条件",
      show: false,
      show2: false,
      title: "添加任务",

      // 已添加的条件列表
      addedConditions: [],
      // 已添加的任务
      addedTasks: [],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
    },
    close2() {
      this.show2 = false;
    },
    toMetrorologicalChange() {
      const app = this;

      uni.navigateTo({
        url: `/pages/automationConfig/meteorologicalChanges/index`,
        events: {
          // 跳到选择气象条件页，监听其数据返回
          onConfigChange: function (data) {
            const cityName = data.cityName;

            Object.keys(data).forEach((item) => {
              if (!data[item]) return;
              // 温度
              if (item === "temperature") {
                return app.addedConditions.push({
                  label: `${conditionMap[data.temperatureType]} ${data[item]}℃`,
                  title: cityName + "温度",
                  value: data[item],
                  type: data.temperatureType,
                  key: item,
                });
              }
              // 湿度
              if (item === "humidity") {
                return app.addedConditions.push({
                  label: `${humidityMap[data[item]]}`,
                  title: cityName + "湿度",
                  value: data[item],
                  key: item,
                });
              }
              // 天气
              if (item === "weather") {
                return app.addedConditions.push({
                  label: `${weatherMap[data[item]]}`,
                  title: cityName + "天气",
                  value: data[item],
                  key: item,
                });
              }
              // Pm2.5
              if (item === "pm25") {
                return app.addedConditions.push({
                  label: `${pm25Map[data[item]]}`,
                  title: cityName + "pm2.5",
                  value: data[item],
                  key: item,
                });
              }
              // 空气质量
              if (item === "airQuality") {
                return app.addedConditions.push({
                  label: `${airQualityMap[data[item]]}`,
                  title: cityName + "空气质量",
                  value: data[item],
                  key: item,
                });
              }
              // 日落日出
              if (item === "sunrise") {
                return app.addedConditions.push({
                  label: `${sunriseMap[data[item]]}`,
                  title: cityName + "日落日出",
                  value: data[item],
                  key: item,
                });
              }
              // 风速
              if (item === "windSpeed") {
                return app.addedConditions.push({
                  label: `${conditionMap[data.windSpeenType]} ${
                    data[item]
                  } m/s`,
                  title: cityName + "风速",
                  value: data[item],
                  type: data.windSpeenType,
                  key: item,
                });
              }
            });
          },
        },
        success: function (res) {
          // 关闭弹窗
          app.close();
        },
      });
    },
    toStateChange() {
      const app = this;
      uni.navigateTo({
        url: "/pages/automationConfig/stateChange/index",
        events: {
          // 监听返回数据，设备状态变化时,1开2关3同步
          deviceStatusChange: function (_data) {
            app.addedConditions.push({
              title: _data?.deviceName + _data?.deviceId,
              label:
                _data?.type === 1 ? "开" : _data?.type === 2 ? "关" : "同步",
              type: _data?.type,
              ..._data,
              isStatus: true,
            });
          },
        },
        success: function (res) {
          // 关闭弹窗
          app.close();
        },
      });
    },
    toRegularTimeChange() {
      const app = this;
      uni.navigateTo({
        url: "/pages/automationConfig/atRegularTimeChange/index",
        events: {
          // 监听返回数据，
          regularTimeChange: function (_data) {
            console.log("_data", _data);

            app.addedConditions.push({
              title: `定时`,
              label: `每天${_data?.timeType === 1 ? "上午" : "下午"} ${
                _data?.hours < 10 ? "0" + _data?.hours : _data?.hours
              }:${_data?.minutes < 10 ? "0" + _data?.minutes : _data?.minutes}`,
              type: _data?.type,
              ..._data,
              isTime: true,
            });
          },
        },
        success: function (res) {
          // 关闭弹窗
          app.close();
        },
      });
    },
    toOperation() {
      const app = this;
      uni.navigateTo({
        url: "/pages/automationConfig/stateChange/index",
        events: {
          // 监听返回数据，设备状态变化时,1开2关3同步
          deviceStatusChange: function (_data) {
            app.addedTasks.push({
              title: _data?.deviceName + _data?.deviceId,
              label:
                _data?.type === 1 ? "开" : _data?.type === 2 ? "关" : "同步",
              type: _data?.type,
              ..._data,
              isStatus: true,
            });
          },
        },
        success: function (res) {
          // 关闭弹窗
          app.close2();
        },
      });
    },
    toEffectTime() {
      uni.navigateTo({
        url: "/pages/automationConfig/effectiveTime/index",
      });
    },
    // 延时
    toDelay() {
      const app = this;
      uni.navigateTo({
        url: "/pages/automationConfig/toDelay/index",
        events: {
          delayChange: (_data) => {
            const { hours, minutes, seconds } = _data;
            app.addedTasks.push({
              title: "延迟执行",
              label: `${hours < 10 ? "0" + hours : hours}时${
                minutes < 10 ? "0" + minutes : minutes
              }分${seconds < 10 ? "0" + seconds : seconds}秒`,
              isStatus: true,
            });
          },
        },
        // 成功
        success: function (res) {
          // 关闭弹窗
          app.close2();
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #f6f7fb;
  height: 100vh;
  padding: 17.045rpx 25.568rpx 25.568rpx 25.568rpx;
}

.config_card {
  padding: 25.568rpx 34.091rpx 25.568rpx 34.091rpx;
  background: rgba(255, 255, 255, 1);

  border-radius: 17.045rpx;

  position: relative;

  .add_config_text {
    position: absolute;
    // 左右居中
    left: 50%;
    transform: translateX(-50%);
    bottom: 63.25rpx;
    color: rgba(0, 0, 0, 0.5);
    font-size: 25.568rpx;
    line-height: 33.75rpx;
  }

  .add_config {
    width: 49.432rpx;
    height: 49.432rpx;
    position: absolute;
    top: 47.727rpx;
    right: 34.091rpx;
  }

  // height: 145px;

  .title {
    font-family: "Microsoft YaHei";
    font-size: 30.682rpx;
    font-weight: 400;
    line-height: 40.5rpx;
    text-align: left;
    color: rgba(0, 0, 0, 1);
  }
  .confong_radio {
    margin-top: 17.045rpx;
  }

  ::v-deep .u-radio-group {
    justify-content: space-between;
    width: 80%;
  }
  ::v-deep .u-radio__text {
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx !important;
    font-weight: 400;
    line-height: 33.75rpx !important;
    text-align: left;
    color: rgba(30, 31, 35, 1);
  }
}

.card_mt {
  margin-top: 17.045rpx;
}

.config_footer {
  .union_png {
    width: 627.273rpx;
    height: 110.83rpx;
  }
}

.popup_content {
  padding: 27.273rpx 42.614rpx 0rpx 42.614rpx;
}

.popup_title {
  display: flex;
  justify-content: center;
  width: 100%;
  font-family: "Microsoft YaHei";
  font-size: 25.568rpx;
  font-weight: 290;
  line-height: 34.006rpx;
  text-align: center;
  color: rgba(0, 0, 0, 0.75);
}
.popup_title_text {
  color: rgba(0, 0, 0, 0.75);
  font-family: "Microsoft YaHei";
  font-size: 25.568rpx;
  font-weight: 400;
  line-height: 33.75rpx;
  text-align: left;
  margin-left: 34.091rpx;
}

.popup_icon_img {
  width: 44.318rpx;
  height: 35.795rpx;
}

.addedConditions_icon_img {
  width: 44.318rpx;
  height: 35.795rpx;
  margin-right: 25.568rpx;
}

.added_conditions {
  margin-top: 34.091rpx;
}
</style>
